<template>
	<view class="home">
		<custom-navbar :show-back="true" @back="handleBack" />

		<view class="content " :style="{ paddingTop: navBarHeight + 'px' }">
			<view class="search mb37 p0030">
				<view class="box fcc mb30">
					<up-search shape="square" placeholder="正在展示" v-model="keyword" :showAction="false"></up-search>
					<up-button type="primary" @click="getProductName()"
						style="width: 140rpx;height: 60rpx;background: #398DFB;border-radius: 10rpx 10rpx 10rpx 10rpx;"
						text="确定"></up-button>
				</view>
				<view class="flex ">
					<view v-for='(item,index) in data16' class="typelist fcolcc" style="margin-right: 67rpx;">
						<view class="f30bc3" :class="cate == item.dictionary_id ? 'c398DFB' :''"
							@click="Switchingsupply_demand(item.dictionary_id)">
							{{item.classification_name}}
						</view>
						<view :class="cate == item.dictionary_id ? 'underline' :''"></view>
					</view>
				</view>
			</view>
			<view class="waterfall-container">
				<u-waterfall v-model="supplyList" ref="uWaterfall">
					<template v-slot:left="{ leftList }">
						<view class="waterfall-item ml30 mr10" v-for="(item, index) in leftList" :key="index">
							<image class="image" :src="item.broadcast_icon" mode="widthFix"></image>
							<!-- <view class="image" mode="widthFix"></view> -->
							<view class="item-content">
								<view class="content-title">{{ item.broadcast_title }}</view>
								<view class="fcsb">
									<view class="fc">
										<image class="wh40" :src="item.enterprise_logo" mode="widthFix"></image>
										<view class="content-tips">{{ item.enterprise_name }}</view>
									</view>
									<view class="fc">
										<image class="wh32" @click="getsetint(item.broadcast_id)"
											:src="item.islike == 0 ? '/static/images/live/未点赞.svg' : '/static/images/live/已点赞.svg'"
											mode="widthFix">
										</image>

										<view class="f286c353532">{{ item.num }}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
					<template v-slot:right="{ rightList }">
						<view class="waterfall-item mr30 ml10" v-for="(item, index) in rightList" :key="index">
							<image class="image" :src="item.enterprise_logo" mode="widthFix"></image>
							<!-- <view class="image" mode="widthFix"></view> -->
							<view class="item-content">
								<view class="content-title">{{ item.broadcast_title }}</view>
								<view class="fcsb">
									<view class="fc">
										<image class="wh40" :src="item.broadcast_icon" mode="widthFix"></image>
										<view class="content-tips">{{ item.enterprise_name }}</view>
									</view>
									<view class="fc">
										<image class="wh32" @click="getsetint(item.broadcast_id)"
											:src="item.islike == 0 ? '/static/images/live/未点赞.svg' : '/static/images/live/已点赞.svg'"
											mode="widthFix">
										</image>

										<view class="f286c353532">{{ item.num }}</view>
									</view>
								</view>
							</view>
						</view>
					</template>
				</u-waterfall>
				<u-loadmore :status="loadStatus" :icon-type="iconType" :load-text="loadText" />
			</view>
		</view>

	</view>

</template>

<script setup>
	import CustomNavbar from '@/components/custom-navbar.vue'
	import {
		ref,
		onMounted,
		computed
	} from 'vue';
	import {
		onLoad,
		onReachBottom,
		onShow,
		onPullDownRefresh,
	} from '@dcloudio/uni-app'
	import {
		livebroadcastlist,
		livebroadcastcate,
		setint
	} from '@/api/live'

	// 2. 获取系统信息（同步操作放在setup最前面）
	const systemInfo = uni.getSystemInfoSync()

	// 3. 定义响应式数据
	const searchKey = ref('')

	// 4. 计算属性
	const navBarHeight = computed(() => systemInfo.statusBarHeight + 44)
	const data16 = ref([])
	const loading = ref(false)

	// 单独请求 getClassification(16) 接口
	const fetchData = async () => {
		try {
			loading.value = true
			const res = await livebroadcastcate('zh')
			data16.value = res.data.data
			cate.value = data16.value[0].dictionary_id // 添加可选链操作符防止undefined

			getlivebroadcastlist()
		} catch (error) {
			console.error('请求分类数据失败:', error)
			uni.showToast({
				title: '加载分类失败',
				icon: 'none'
			})
		} finally {
			loading.value = false
		}
	}
	onMounted(fetchData)
	const page = ref(1)
	const limit = ref(10)
	const keyword = ref('')
	const cate = ref('')
	// 供需大厅
	const supplyList = ref([
		//{
		// 		img: '/static/images/live/摩托.jpg',
		// 		gong: '/static/images/home/Frame.svg',
		// 		text: 'logo设计接单了 我们致力于提供专业的 logo…',
		// 		tips: '赵一鸣'
		// 	},
		// 	{
		// 		img: '/static/images/live/苹果.jpg',
		// 		gong: '/static/images/home/Frame.svg',
		// 		text: '小红书直播间在哪里看?',
		// 		tips: '李三'
		// 	},
		// 	{
		// 		img: '/static/images/live/贴纸.jpg',
		// 		gong: '/static/images/home/Frame.svg',
		// 		text: '小红书直播间在哪里看?',
		// 		tips: '麻子'
		// 	}, {
		// 		img: '/static/images/live/摩托.jpg',
		// 		gong: '/static/images/home/Frame.svg',
		// 		text: 'logo设计接单了 我们致力于提供专业的 logo…',
		// 		tips: '赵一鸣'
		// 	},
		// 	{
		// 		img: '/static/images/live/苹果.jpg',
		// 		gong: '/static/images/home/Frame.svg',
		// 		text: '小红书直播间在哪里看?',
		// 		tips: '李三'
		// 	},
		// 	{
		// 		img: '/static/images/live/贴纸.jpg',
		// 		gong: '/static/images/home/Frame.svg',
		// 		text: '小红书直播间在哪里看?',
		// 		tips: '麻子'
		// 	}
	])
	const getlivebroadcastlist = async () => {
		const parmas = {
			lang_code: 'zh',
			limit: limit.value,
			page: page.value,
			keyword: keyword.value,
			cate: cate.value
		}
		try {
			const Res = await livebroadcastlist(parmas)
			if (Res.code === 200) { // 注意这里是 ===，不是 =
				supplyList.value = Res.data.data

			}
		} catch (error) {
			console.error('获取直播列表失败:', error)
			uni.showToast({
				title: '加载直播列表失败',
				icon: 'none'
			})
		}
	}
	const Switchingsupply_demand = (val) => {
		cate.value = val
		getlivebroadcastlist()
	}
	// 搜索名称
	const getProductName = () => {
		getlivebroadcastlist()
	}
	const getsetint = async (val) => {
		try {
			const params = {
				broadcast_id: val
			}
			const Res = await setint(params)

			if (Res.code == 200) {
				// 直接更新本地数据，避免重新请求整个列表
				const index = supplyList.value.findIndex(item => item.broadcast_id === val)
				if (index !== -1) {
					// 切换点赞状态
					supplyList.value[index].islike = supplyList.value[index].islike === 0 ? 1 : 0
					// 更新点赞数
					supplyList.value[index].num = Res.data.num ||
						(supplyList.value[index].islike === 1 ?
							supplyList.value[index].num + 1 :
							Math.max(0, supplyList.value[index].num - 1))

					// 强制视图更新
					supplyList.value = [...supplyList.value]
					console.log(supplyList.value, 222)
				}
			} else {
				uni.showToast({
					title: Res.message || '操作失败',
					icon: 'none'
				});
			}
		} catch (error) {
			console.error('点赞失败:', error)
			uni.showToast({
				title: '操作失败',
				icon: 'none'
			});
		}
	}
	const loadStatus = ref('loadmore') // loadmore-加载前，loading-加载中，nomore-没有更多了
	const iconType = ref('flower')
	const loadText = ref({
		loadmore: '轻轻上拉',
		loading: '努力加载中',
		nomore: '实在没有了'
	})
	const loadMore = async () => {
		if (loadStatus.value === 'nomore') return

		loadStatus.value = 'loading'
		page.value += 1

		try {
			const params = {
				lang_code: 'zh',
				limit: limit.value,
				page: page.value,
				keyword: keyword.value,
				cate: cate.value
			}
			const res = await livebroadcastlist(params)

			if (res.code === 200) {
				const newData = res.data.data

				if (newData.length < limit.value) {
					loadStatus.value = 'nomore'
				} else {
					loadStatus.value = 'loadmore'
				}

				supplyList.value = [...supplyList.value, ...newData]
			}
		} catch (error) {
			console.error('加载更多失败:', error)
			loadStatus.value = 'loadmore'
			page.value -= 1 // 加载失败回退页码
		}
	}
	// onLoad(() => {
	// 	loadMore()
	// })
	onPullDownRefresh(async () => {
		page.value = 1
		await getlivebroadcastlist()
		uni.stopPullDownRefresh()
	})
	onReachBottom(() => {
		loadStatus.value = 'loading';
		// 模拟数据加载
		setTimeout(() => {
			loadMore();
			loadStatus.value = 'loadmore';
		}, 1000)
	})

	const handleBack = () => {
		uni.switchTab({
			url: '/pages/index/index'
		});
	};
</script>

<style lang="scss" scoped>
	.home {
		width: 100%;
		min-height: 100vh;
		overflow: hidden; // 防止页面整体滚动

		.content {
			padding-top: var(--status-bar-height);
			padding-top: calc(var(--status-bar-height) + 70rpx);
			/* 导航栏高度 */
			height: 100%;
			display: flex;
			flex-direction: column;
			// flex-direction: column;
			// align-items: center;
			// justify-content: center;

			.search {
				width: 100%;
				height: 213rpx;
				background: #FFFFFF;
				border-radius: 0rpx 0rpx 0rpx 0rpx;
				padding: 16rpx 30rpx 0 30rpx;

				.box {
					width: 100%;
					height: 90rpx;
					background: #F3F3F3;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
				}
			}

			.classify {
				width: 100%;
			}

			.waterfall-container {
				flex: 1;
				overflow-y: auto; // 必须设置
				-webkit-overflow-scrolling: touch; // iOS平滑滚动

				.waterfall-item {
					margin-bottom: 20rpx;
					border-radius: 12rpx;
					overflow: hidden;
					background-color: #fff;
					// margin: 0px;

					.image {
						width: 334rpx;
						height: 300rpx;
						// background: pink;
					}

					.item-content {
						padding: 20rpx;

						.content-title {
							font-size: 28rpx;
							color: #333;
							margin-bottom: 10rpx;
						}

						.content-tips {
							font-size: 24rpx;
							color: #353532;
						}
					}
				}
			}


		}
	}
</style>